<template>
  <a-select :value="arrayValue" @change="onChange" mode="multiple" :placeholder="placeholder" allowClear>
    <a-select-option
      v-for="(item,index) in selectOptions"
      :key="index"
      :getPopupContainer="getParentContainer"
      :value="item.value">
      {{ item.text || item.label|| item.name }}
    </a-select-option>
  </a-select>
</template>

<script>
//option {label:,value:}
import { getAction } from '@api/manage'

export default {
  name: 'JSelectMultiple',
  props: {
    placeholder:{
      type: String,
      default:'',
      required: false
    },
    value:{
      type: String,
      required: false
    },
    readOnly:{
      type: Boolean,
      required: false,
      default: false
    },
    options:{
      type: Array,
      default:()=>[],
      required: false
    },
    triggerChange:{
      type: Boolean,
      required: false,
      default: false
    },
    spliter:{
      type: String,
      required: false,
      default: ','
    },
    popContainer:{
      type:String,
      default:'',
      required:false
    },
    dictCode:{
      type:String,
      required:false
    },
  },
  data(){
    return {
      arrayValue:!this.value?[]:this.value.split(this.spliter),
      dictOptions: [],
    }
  },
  computed:{
    selectOptions(){
      return this.dictOptions.length > 0 ? this.dictOptions : this.options
    },
  },
  watch:{
    value (val) {
      if(!val){
        this.arrayValue = []
      }else{
        this.arrayValue = this.value.split(this.spliter)
      }
    }
  },
  mounted(){
    if (this.dictCode) {
      this.loadDictOptions()
    }
  },
  methods:{
    onChange (selectedValue) {
      if(this.triggerChange){
        this.$emit('change', selectedValue.join(this.spliter));
      }else{
        this.$emit('input', selectedValue.join(this.spliter));
      }
    },
    getParentContainer(node){
      if(!this.popContainer){
        return node.parentNode
      }else{
        return document.querySelector(this.popContainer)
      }
    },
    // 根据字典code查询字典项
    loadDictOptions(){
      getAction(`/sys/dict/getDictItems/${this.dictCode}`,{}).then(res=>{
        if (res.success) {
          this.dictOptions = res.result.map(item => ({value: item.dictDataCode, label: item.dictDataDesc}))
        } else {
          console.error('getDictItems error: : ', res)
          this.dictOptions = []
        }
      })
    },
  },

}
</script>
